<template>
  <div class="container1">
    <div class="top-section">
      <div class="page-x" style="width: 100%; height: 100%;">
        <div id="container" ref="containerG6" class="g6-x" />
        <Dialog2 class="Dialog2" />
      </div>
    </div>
    <div class="bottom-section">
      <div class="page-x" style="width: 100%; height: 100%">
        <div id="container" ref="containerG6" class="g6-x2" />
        <Dialog2 class="Dialog21" />
      </div>
    </div>
  </div>
</template>


<script>
import G6 from "@antv/g6";
import Dialog2 from "@/views/xd/components/dialog/dialog2.vue";

export default {
  name: "Started",
  components: { Dialog2 },
  data() {
    return {
      dialogShow2: false,
      graph: null,
      graphData: {
        nodes: [
          {
            id: "node1", // String，该节点存在则必须，节点的唯一标识
            x: 100, // Number，可选，节点位置的 x 值
            y: 200, // Number，可选，节点位置的 y 值
          },
          {
            id: "node2", // String，该节点存在则必须，节点的唯一标识
            x: 300, // Number，可选，节点位置的 x 值
            y: 200, // Number，可选，节点位置的 y 值
          },
        ],
        // 边集
        edges: [
          {
            source: "node1", // String，必须，起始点 id
            target: "node2", // String，必须，目标点 id
          },
        ],
      },
    };
  },
  mounted() {
    this.init();
    this.init1();
  },
  methods: {
    initGraph() {
      const containerG6 = this.$refs.containerG6; 
      this.graph = new G6.Graph({
        container: containerG6,
        width: containerG6.offsetWidth,
        height: containerG6.offsetHeight,
      });
      this.graph.data(this.graphData);
      this.graph.render();
    },
    init() {
      let that = this;
      const container = document.getElementById("container");
      const width = container.scrollWidth;
      const height = container.scrollHeight || 500;
      const graph = new G6.Graph({
        container: "container",
        width,
        height,
        layout: {
          type: "force",
          preventOverlap: true,
          linkDistance: 250,
        },
        defaultNode: {
          color: "#5B8FF9",
          labelCfg: {
            style: {
              fill: '#ffffff',
              fontSize: 18,
            },
          },
        },
        modes: {
          default: ["drag-canvas"],
        },
        defaultEdge: {
          style: {
            stroke: '#0099ff',
          },
        },
      });
      const img2 = new Image();
      img2.src = require("@/assets/xd/user1.png");

      let num = 800
      const data = {
        nodes: [
          {
            id: "node0",
            label: "王芳",
            size: 100,
            style: {
              fill: "#f59a2d",
            },
            type: "image",
            img: require("@/assets/xd/user1.png"),
            fx: num * 0.85,
            fy: num * 0.5
          },

          {
            id: "node2",
            label: "芳华",
            style: {
              fill: "#8080ff",
            },
            size: 70,
            type: "image",
            img: require("@/assets/xd/user3.png"),
            fx: num * 0.6,
            fy: num * 0.5
          },
          {
            id: "node3",
            label: "孤芳自赏",
            style: {
              fill: "#8080ff",
            },
            size: 70,
            type: "image",
            img: require("@/assets/xd/user3.png"),
            fx: num * 1.1,
            fy: num * 0.5
          },


          {
            id: "node4",
            label: "小床大睡",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: num * 0.4,
            fy: num * 0.4
          },
          {
            id: "node5",
            label: "一罐寡言",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: num * 0.4,
            fy: num * 0.5
          },
          {
            id: "node6",
            label: "Pendlers",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: num * 0.4,
            fy: num * 0.6
          },

          {
            id: "node7",
            label: "云儿红玫瑰",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: num * 0.6,
            fy: num * 0.7
          }, {
            id: "node8",
            label: "芳小花",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: num * 1.1,
            fy: num * 0.7
          },
          {
            id: "node9",
            label: "大大饼干、",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: num * 1.3,
            fy: num * 0.5
          },
          {
            id: "node10",
            label: "要开心&",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: num * 1.3,
            fy: num * 0.6
          },
          {
            id: "node11",
            label: "小王不慌",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: num * 1.3,
            fy: num * 0.4
          },
        ],
        edges: [
          {
            source: "node2", target: "node4", style: {
              stroke: '#ffb302'
            }
          },
          {
            source: "node2", target: "node5", style: {
              stroke: '#ffb302'
            }
          },
          {
            source: "node2", target: "node6", style: {
              stroke: '#ffb302' 
            }
          },
          {
            source: "node2", target: "node7", style: {
              stroke: '#ffb302'
            }
          },
          // 知乎
          {
            source: "node3", target: "node8", style: {
              stroke: '#2aed07' 
            }
          },
          {
            source: "node3", target: "node9", style: {
              stroke: '#2aed07'
            }
          },
          {
            source: "node3", target: "node10", style: {
              stroke: '#2aed07'
            }
          },
          {
            source: "node3", target: "node11", style: {
              stroke: '#2aed07'
            }
          },
          { source: "node0", target: "node2" },
          { source: "node0", target: "node3" },
       
        ],
      };
      const nodes = data.nodes;
      graph.data({
        nodes,
        edges: data.edges.map(function (edge, i) {
          edge.id = "edge" + i;
          return Object.assign({}, edge);
        }),
      });
      graph.render();

      graph.on("node:click", function (e) {
        console.log(e);
        that.dialogShow2 = false;
        let item = e.item._cfg;
        if (item.model.label == "用户admin") {
          console.log("用户admin");
          that.dialogShow2 = true;
        } else if (item.model.label == "微博") {
          that.dialogShow2 = false;
        } else {
          that.dialogShow2 = true;
        }
        // end
      });
      graph.on("node:dragstart", function (e) {
        graph.layout();
        refreshDragedNodePosition(e);
      });
      graph.on("node:drag", function (e) {
        refreshDragedNodePosition(e);
      });
      graph.on("node:dragend", function (e) {
        e.item.get("model").fx = null;
        e.item.get("model").fy = null;
      });

      if (typeof window !== "undefined")
        window.onresize = () => {
          if (!graph || graph.get("destroyed")) return;
          if (!container || !container.scrollWidth || !container.scrollHeight)
            return;
          graph.changeSize(container.scrollWidth, container.scrollHeight);
        };
    },
    init1() {
      let that = this;
      const container = document.getElementById("container");
      const width = container.scrollWidth;
      const height = container.scrollHeight || 500;
      const graph = new G6.Graph({
        container: "container",
        width,
        height,
        layout: {
          type: "force",
          preventOverlap: true,
          linkDistance: 250,
        },
        defaultNode: {
          color: "#5B8FF9",
          labelCfg: {
            style: {
              fill: '#ffffff',
              fontSize: 18, 
            },
          },
        },
        modes: {
          default: ["drag-canvas"],
        },
        defaultEdge: {
          style: {
            stroke: '#0099ff', 
          },
        },
      });
      const img2 = new Image();
      img2.src = require("@/assets/xd/user1.png");

      let num = 800 //位置基准
      const data = {
        nodes: [
          {
            id: "node0",
            label: "王芳",
            size: 100,
            style: {
              fill: "#f59a2d",
            },
            type: "image",
            img: require("@/assets/xd/user1.png"),
            fx: num * 0.85,
            fy: num * 0.5
          },

          {
            id: "node2",
            label: "芳华",
            style: {
              fill: "#8080ff",
            },
            size: 70,
            type: "image",
            img: require("@/assets/xd/user3.png"),
            fx: num * 0.6,
            fy: num * 0.5
          },



          {
            id: "node4",
            label: "小床大睡",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: num * 0.4,
            fy: num * 0.4
          },
          {
            id: "node5",
            label: "一罐寡言",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: num * 0.4,
            fy: num * 0.5
          },
          {
            id: "node6",
            label: "Pendlers",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: num * 0.4,
            fy: num * 0.6
          },

          {
            id: "node7",
            label: "云儿红玫瑰",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: num * 0.6,
            fy: num * 0.7
          },


        ],
        edges: [
  
          {
            source: "node2", target: "node4", style: {
              stroke: '#ffb302' 
            }
          },
          {
            source: "node2", target: "node5", style: {
              stroke: '#ffb302' 
            }
          },
          {
            source: "node2", target: "node6", style: {
              stroke: '#ffb302'
            }
          },
          {
            source: "node2", target: "node7", style: {
              stroke: '#ffb302'
            }
          },
          // 知乎

          // admin
          { source: "node0", target: "node2" },
          { source: "node0", target: "node3" },
        ],
      };
      const nodes = data.nodes;
      graph.data({
        nodes,
        edges: data.edges.map(function (edge, i) {
          edge.id = "edge" + i;
          return Object.assign({}, edge);
        }),
      });
      graph.render();

      graph.on("node:click", function (e) {
        console.log(e);
        that.dialogShow2 = false;
        let item = e.item._cfg;
        if (item.model.label == "用户admin") {
          console.log("用户admin");
          that.dialogShow2 = true;
        } else if (item.model.label == "微博") {
          that.dialogShow2 = false;
        } else {
          that.dialogShow2 = true;
        }
        // end
      });
      graph.on("node:dragstart", function (e) {
        graph.layout();
        refreshDragedNodePosition(e);
      });
      graph.on("node:drag", function (e) {
        refreshDragedNodePosition(e);
      });
      graph.on("node:dragend", function (e) {
        e.item.get("model").fx = null;
        e.item.get("model").fy = null;
      });

      if (typeof window !== "undefined")
        window.onresize = () => {
          if (!graph || graph.get("destroyed")) return;
          if (!container || !container.scrollWidth || !container.scrollHeight)
            return;
          graph.changeSize(container.scrollWidth, container.scrollHeight);
        };
    },
  },
};

function refreshDragedNodePosition(e) {
  const model = e.item.get("model");
  model.fx = e.x;
  model.fy = e.y;
}
</script>

<style scoped>
.g6-x {
  position: absolute;
  top: -150px;
  width: 100%;
  height: 60%;
}

.g6-x2 {
  position: absolute;
  top: -200px;
  width: 100%;
  height: 60%;
}
.zindexModel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  z-index: 1;
}

.zindexModel2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55%;
  z-index: 1;
}

.Dialog2 {
  position: absolute;
  top: 20px;
}

.Dialog21 {
  position: absolute;
  top: 600px;
}

.container1 {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.top-section,
.bottom-section {
  flex: 1;
  border-bottom: 1px solid #ccc;
}
</style>